/*
* @Description:网络扩展
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div>
    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success" align-center>
      <el-step v-for="(step,idx) in steps" :key="idx+'step'">
        <template slot="title">
          <el-tooltip placement="bottom" effect="light" :content="step.note">
            <div>{{step.title}}</div>
          </el-tooltip>
        </template>
      </el-step>
      <el-step title="生成扩展网络"></el-step>
    </el-steps>
    <div class="btns" v-if="active!=2">
      <el-button type="primary" v-if="active==1" @click="prevStep">上一步</el-button>
      <el-button type="primary" @click="nextStep">下一步</el-button>
      <el-button type="info" @click="skipStep">跳过</el-button>
      <el-button type="info" v-if="active!=1" @click="dialogVisible=true">网络扩展向导</el-button>
    </div>
    <!-- 第一步：组织扩展 -->
    <template v-if="active==0">
      <network-extend-organization @getSelectedVal="getSelectedVal"></network-extend-organization>
    </template>
    <!-- 第二步：通道扩展 -->
    <template v-else-if="active==1">
      <network-extend-channel @getSelectedVal="getSelectedVal"></network-extend-channel>
    </template>
    <!-- 第三步：生成扩展网络 -->
    <template v-else-if="active==2">
      <network-extend-generation @configState="configState"></network-extend-generation>
    </template>
    <!-- 弹窗：网络扩展向导 -->
    <el-dialog title="网络扩展向导" :close-on-click-modal="false" :visible.sync="dialogVisible" width="48%">
      <network-extend-wizard></network-extend-wizard>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    checkOrgNext,
    checkChannelNext
  } from '@/api/blockchain/networkmanage'
  import networkExtendOrganization from './networkExtendOrganization'
  import networkExtendGeneration from './networkExtendGeneration'
  import networkExtendChannel from './networkExtendChannel'
  import networkExtendWizard from './networkExtendWizard'
  export default {
    components: {
      networkExtendOrganization,
      networkExtendGeneration,
      networkExtendChannel,
      networkExtendWizard
    },
    data() {
      return {
        active: 0,
        dialogVisible: false,
        steps: [{
            title: '组织扩展',
            note: '组织扩展是指对当前网络中已有组织中的主机进行新增，如将之前不在组织Org1中的主机h4加入Org1；组织扩展并不是每次扩展时的必选项，如果不需要进行组织扩展则单击“跳过”按钮即可。'
          },
          {
            title: '通道扩展',
            note: '通道扩展指对网络中已存在的通道进行组织的扩展，如将之前不在通道channeldev3中的组织Org1加入到通道channeldev3中。通道扩展为网络扩展时的非必选项，如不需通道扩展则单击“跳过”按钮，直接进入“生成扩展网络”流程即可。'
          }
        ],
        organization: null,
        channel: null,
      }
    },
    methods: {
      nextStep() {
        if (this.active == 0) {
          // 组织扩展
          if (this.organization == null) {
            // 未扩展
            checkOrgNext().then((res) => {
              if (res.data == 'success') {
                this.$message.warning('没有对组织进行扩展，如果要直接进入通道扩展页面则单击跳过按钮');
              } else {
                this.$message.warning(res.data);
              }
            })
          } else {
            //已扩展
            checkOrgNext().then((res) => {
              if (res.data == 'success') {
                this.active++
              } else {
                this.$message.warning(res.data);
              }
            })
          }
        } else {
          // 通道扩展
          if (this.channel == null) {
            // 未扩展
            checkChannelNext().then((res) => {
              if (res.data == 'success') {
                this.$message.warning('没有对通道进行扩展，如果要生成扩展网络则单击跳过按钮');
              } else {
                this.$message.warning(res.data);
              }
            })
          } else {
            //已扩展
            checkChannelNext().then((res) => {
              if (res.data == 'success') {
                this.active++
              } else {
                this.$message.warning(res.data);
              }
            })
          }
        }
      },
      prevStep() {
        this.active--;
        this.organization = null;
      },
      skipStep() {
        if (this.active == 0) {
          checkOrgNext().then((res) => {
            if (res.data == 'success') {
              this.active++;
            } else {
              this.$message.warning(res.data);
            }
          })
        } else {
          checkChannelNext().then((res) => {
            if (res.data == 'success') {
              this.active++;
            } else {
              this.$message.warning(res.data);
            }
          })
        }
      },
      getSelectedVal(val) {
        if (this.active == 0) {
          this.organization = val;
        } else {
          this.channel = val;
        }
      },
      configState(val) {
        this.$emit('extendState', val);
      }
    }
  }

</script>
<style lang="scss" scoped>
  .el-steps {
    background-color: #fff;
    padding: 15px 200px;

    &>>>.el-step__icon {
      background-color: #e1e1e1;
      color: #b1b1b1;
      border-color: #e1e1e1;
    }

    &>>>.el-step__line {
      height: 4px !important;
      background-color: #f1f1f1 !important;
    }

    &>>>.el-step__head {

      &.is-process,
      &.is-success {
        border-color: #2e7dff;

        .el-step__icon {
          background-color: #2e7dff;
          color: #fff;
          width: 26px;
          height: 26px;
          border-color: #afceff;
        }
      }

      &.is-success {
        .el-step__line {
          background-color: #2e7dff !important;
        }
      }
    }

    &>>>.el-step__title {
      color: #999999;
      font-size: 14px;

      &.is-process,
      &.is-success {
        color: #2e7dff;
      }
    }
  }

  .btns {
    margin: 10px 0;
  }

  .dialog-footer {
    margin: 15px 0;
  }

</style>
